<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="../lib/three.js"></script>

        <script type="text/javascript">
            function init() {
                var renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000);
                var scene = new THREE.Scene();

                // camera
                // canvas size is 400x300
                var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
                camera.position.set(0, 0, 5);
                //camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);

                // a cube in the scene
                var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
                        new THREE.MeshBasicMaterial({
                            color: 0xff0000,
                            wireframe: true
                        })
                );
                scene.add(cube);

                // render
                renderer.render(scene, camera);
            }
        </script>
    </head>

    <body onload="init()" style="width: 100%; height: 350px; margin: 0;">
        <canvas id="mainCanvas" style="width: 400px; height: 350px; margin: 0 auto; display: block;"></canvas>
    </body>
</html>
